<!--用户信息页-->

<template>
  <div>
    <el-dialog :title=title :visible.sync="show" width="70%" :before-close="handleClose">
      <template>

        <el-row :gutter="20">
          <el-col :span="2" class="label">用户ID:</el-col>
          <el-col :span="4" class="msg">{{user.userId}}</el-col>
          <el-col :span="2" class="label">姓名:</el-col>
          <el-col :span="4" class="msg">{{user.realName}}</el-col>
          <el-col :span="2" class="label">年龄:</el-col>
          <el-col :span="4" class="msg">{{user.age}}</el-col>
          <el-col :span="2" class="label">性别:</el-col>
          <el-col :span="4" class="msg">{{user.sex}}</el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="2" class="label">电话:</el-col>
          <el-col :span="4" class="msg">{{user.cell}}</el-col>
        </el-row>

        <hr style="margin: 5px; color: #EBEEF5"/>

        <el-row :gutter="20">
          <el-col :span="2" class="label">绑卡日期:</el-col>
          <el-col :span="4" class="msg">{{user.cardDate != null ? user.cardDate : '未知'}}</el-col>
          <el-col :span="2" class="label">实名日期:</el-col>
          <el-col :span="4" class="msg">{{user.realDate != null ? user.realDate : '未知'}}</el-col>
          <el-col :span="2" class="label">注册日期:</el-col>
          <el-col :span="4" class="msg">{{user.registerDate != null ? user.registerDate : '未知'}}</el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="2" class="label">注册渠道:</el-col>
          <el-col :span="4" class="msg">{{user.registerFromName != null ? user.registerFromName : '未知'}}</el-col>
          <el-col :span="2" class="label">下载渠道:</el-col>
          <el-col :span="4" class="msg">{{user.registerDeviceFromName != null ? user.registerDeviceFromName : '未知'}}</el-col>
        </el-row>

      </template>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'UserData',
    data () {
      return {
        title: '',
        show: false,
        user: {
          userId: '',
          realName: '',
          age: '',
          sex: '',
          cell: '',
          cardDate: '', // 绑卡日期
          realDate: '', // 实名日期
          registerDate: '', // 注册日期
          registerFromName: '', // 注册渠道
          registerDeviceFromName: '', // 下载渠道
        }
      }
    },
    created() {
    },
    methods: {
      showUserData(userData) {
        this.title = '用户 ' + userData.realName + ' 的基础信息';
        this.user = userData;
        this.show = true;
      },
      handleClose() {
        this.show = false;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .label {
    text-align: right;
    color: #6f7180;
  }
  .msg {
    text-align: left;
    color: blue;
  }
</style>
